﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/Content/jquery.dataTables.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.dataTables.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //http://www.datatables.net
            $('#sortTableExample').dataTable({
                "sDom": "rt",
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "/api/Category",
                "fnServerData": function (url, data, callback) {
                    $.ajax({
                        "url": url,
                        "data": data,
                        "success": callback,
                        "contentType": "application/json",
                        "dataType": "json",
                        "type": "GET",
                        "cache": false,
                        "error": function () {
                            alert("DataTables warning: JSON data from server failed to load or be parsed. " +
                            "This is most likely to be caused by a JSON formatting error.");
                        }
                    });
                },
                "aoColumns": [
                    { "bSortable": true },
                    { "bSortable": true },
                    { "bSortable": true },
                    { "bSortable": false }
        ]
            });

            ////http://www.datatables.net
            //$('#sortTableExample').dataTable({
            //    "sDom": "rt",
            //    "bJQueryUI": true,
            //    "sPaginationType": "full_numbers",
            //    "bProcessing": true,
            //    "bServerSide": true,
            //    "sAjaxDataProp": "data.inner",
            //    "sAjaxSource": "/api/Category",
            //    "fnServerData": function (url, aaData, callback, oSettings) {
            //        oSettings.jqXHR = $.ajax({
            //            "url": url,
            //            "data": aaData,
            //            "success": callback,
            //            "contentType": "application/json",
            //            "dataType": "json",
            //            "type": "GET",
            //            "cache": false,
            //            "error": function () {
            //                alert("DataTables warning: JSON data from server failed to load or be parsed. " +
            //                "This is most likely to be caused by a JSON formatting error.");
            //            }
            //        });
            //    },
            //    "aoColumns": [
            //{ "mData": "CategoryID" },
            //{ "mData": "CategoryName" },
            //{ "mData": "Description" },
            //{ "mData": "Picture" }
            //    ]
            //});
        });
    </script>
</head>
<body>
    <table id="sortTableExample" class="table table-striped table-bordered table-hover table-condensed">
        <thead style=" background-color: #006DCC; color: white;">
            <tr>
                <th>CategoryID</th>
                <th>CategoryName</th>
                <th>Description</th>
                <th>Picture</th>
            </tr>
        </thead>
        <tbody id="productsection"></tbody>
    </table>

</body>
</html>
